/* // 定义组件
export default {
    name: 'MyComponent',
    props: {
      msg: {
        type: String,
        required: true
      }
    },
    render() {
      return (
        <div>
          <h1>{this.msg}</h1>
        </div>
      )
    }
  } */
/* 
export default () => {
  const list = [1, 2, 3, 4, 5]
  return (
    <div>
      {list.map((item) => (<div>{item}</div> ))}
    </div>
  )
} 
*/
/*
export default () => {
  const handleClick = (e) => {
    console.log('clicked' , e)
  }
  return (
    <div>
      <button onClickOnce={handleClick}>点击我</button>
    </div>
  )
}
*/
/* export default () => {
  const childComponent = () => {
   return <div>hello child 888</div>
  }
  return (
    <div>
      <childComponent>
        <div>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit.
           Voluptates eius sint nemo quos voluptate incidunt ullam? 
           Expedita eum ex dolores maiores nobis velit, placeat 
           architecto assumenda asperiores vel, maxime harum?
        </div>
      </childComponent>
    </div>
  )
} */

/* 
export default () => {
  const childComponent = (props, context) => {
    console.log('8888---')
    console.log(props)
    console.log(context)
    const { slots } = context;
    return <div {...props} onClick={() => context.emit('Message')}>{slots.default()}</div>
  }
  return (
    <div>
      <childComponent 
        id="lerte" 
        data-label="vuejsx" 
        onMessage={() => alert('message')}>
          组件的内容111        
      </childComponent>      
    </div>
  )
}
 */
export default () => {
  // 参数有 props,{slots,emit,attrs}
  const childComponent = (props, context) => {
    // console.log('8888---')
    // console.log(props)
    // console.log(context)
    const { slots } = context;
    return <div {...props} onClick={() => context.emit('Message',123456)}>{slots.default()}</div>
  }
  return (
    <div>
      <childComponent 
        id="lerte" 
        data-label="vuejsx" 
        onMessage={(e) => alert(e)}>
          组件的内容111        
      </childComponent>      
    </div>
  )
}

